﻿@page "/treeview/default-functionalities"

@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent;

<SampleDescription>
    <p>The <a href='https://www.syncfusion.com/blazor-components/blazor-treeview' target='_blank'>Blazor TreeView</a> sample demonstrates the default functionalities of the TreeView. Click on node to select it, and click on icon or double click on node to expand/collapse it. The child nodes will be loaded on expand the parent node.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>TreeView</code> component is used to display the data in a hierarchical structure with the configuration options to control the way of data is presented and manipulated. It will pull the data from a data source, such as an array of JSON objects, OData web services, or DataManager binding data fields to the <code>TreeViewFieldsSettings</code> directive.</p>
   <p>In this demo, the TreeView is populated with its minimum default settings.</p>
   <p>More information on the TreeView instantiation can be found in the <a href='https://blazor.syncfusion.com/documentation/treeview/getting-started/' target='_blank'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="control_wrapper">
        <SfTreeView TValue="TreeItem">
            <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="NodeId" Text="NodeText" Expanded="Expanded" Child="@("Child")"></TreeViewFieldsSettings>
        </SfTreeView>
    </div>
</div>

@code{
    List<TreeItem> TreeDataSource = new List<TreeItem>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeDataSource.Add(new TreeItem
        {
            NodeId = "01",
            NodeText = "Local Disk (C:)",
            Expanded = true,
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "01-01", NodeText = "Program Files",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "01-01-01", NodeText = "Windows NT" },
                        new TreeItem { NodeId = "01-01-02", NodeText = "Windows Mail" },
                        new TreeItem { NodeId = "01-01-03", NodeText = "Windows Photo Viewer" }
                    },
                },
                new TreeItem { NodeId = "01-02", NodeText = "Users", Expanded = true,
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "01-02-01", NodeText = "Smith" },
                        new TreeItem { NodeId = "01-02-02", NodeText = "Public" },
                        new TreeItem { NodeId = "01-02-03", NodeText = "Admin" },
                    },
                },
                new TreeItem { NodeId = "01-03", NodeText = "Windows",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "01-03-01", NodeText = "Boot" },
                        new TreeItem { NodeId = "01-03-02", NodeText = "FileManager" },
                        new TreeItem { NodeId = "01-03-03", NodeText = "System32" },
                    }
                },
            },
        });

        TreeDataSource.Add(new TreeItem
        {
            NodeId = "02",
            NodeText = "Local Disk (D:)",
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "02-01", NodeText = "Personals",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "02-01-01", NodeText = "My photo.png" },
                        new TreeItem { NodeId = "02-01-02", NodeText = "Rental document.docx" },
                        new TreeItem { NodeId = "02-01-03", NodeText = "Pay slip.pdf" },
                    },
                },
                new TreeItem { NodeId = "02-02", NodeText = "Projects",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "02-02-01", NodeText = "ASP Application " },
                        new TreeItem { NodeId = "02-02-02", NodeText = "TypeScript Application" },
                        new TreeItem { NodeId = "02-02-03", NodeText = "React Application" },
                    }
                },
                new TreeItem { NodeId = "02-03", NodeText = "Office",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "02-03-01", NodeText = "Work details.docx " },
                        new TreeItem { NodeId = "02-03-02", NodeText = "Weekly report.docx" },
                        new TreeItem { NodeId = "02-03-03", NodeText = "Wish list.csv" },
                    }
                },
            },
        });

        TreeDataSource.Add(new TreeItem
        {
            NodeId = "03",
            NodeText = "Local Disk (E:)",
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "03-01", NodeText = "Pictures",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "03-01-01", NodeText = "Wind.jpg " },
                        new TreeItem { NodeId = "03-01-02", NodeText = "Stone.jpg" },
                        new TreeItem { NodeId = "03-01-03", NodeText = "Home.jpg" },
                    }
                },
                new TreeItem { NodeId = "03-02", NodeText = "Documents", Icon = "docx",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "03-02-01", NodeText = "Environment Pollution.docx " },
                        new TreeItem { NodeId = "03-02-02", NodeText = "Global Warming.ppt" },
                        new TreeItem { NodeId = "03-02-03", NodeText = "Social Network.pdf" },
                    },
                },
                new TreeItem { NodeId = "03-03", NodeText = "Study Materials",
                    Child = new List<TreeItem>()
                    {
                        new TreeItem { NodeId = "03-03-01", NodeText = "UI-Guide.pdf" },
                        new TreeItem { NodeId = "03-03-02", NodeText = "Tutorials.zip" },
                        new TreeItem { NodeId = "03-03-03", NodeText = "TypeScript.7z" },
                    }
                },
            },
        });
    }

    class TreeItem
    {
        public string NodeId { get; set; }
        public string NodeText { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
        public bool Selected { get; set; }
        public List<TreeItem> Child { get; set; }
    }
}

<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>